<template>
	<div id="camera-equipment-management" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box; overflow: hidden">
		<div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px">
			<div style="box-sizing: border-box">
				<!-- <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
					<el-form class="box-f" ref="queryForm" :inline="true"> -->
						<!-- <el-form-item :label="$t('mo1F7yI1efBw43XlLvaoT')">
                            <el-select 
                                v-model="searchVal" 
                                filterable 
                                class="m-2" 
                                :placeholder="$t('sYb4Rx1bksqYFlQcCoUf')" 
                                @change="searchChange"
                                 popper-class="selectStyle"
                            >
                                <el-option
                                    v-for="item in searchOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item> -->
						<!-- <el-form-item>
                            <template v-if="searchVal === '1'">
                                <el-input v-model="transferVal" :placeholder="$t('ztu0TpvwBrwVxA1Hahd4A')" clearable />
                            </template>
                            <template v-else-if="searchVal === '2'">
                                <el-input v-model="transferVal" :placeholder="$t('anzVirgNbenjNuTUq8hSf')" clearable />
                            </template>
                            <template v-else>
                                <el-select 
                                    v-model="transferVal" 
                                    filterable 
                                    class="m-2" 
                                    :placeholder="$t('uEOs8sH3iErqSx2Rx0h')" 
                                    value-key="value"
                                     popper-class="selectStyle"
                                >
                                    <el-option
                                        v-for="item in statusNam"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </template>
                        </el-form-item> -->
						<!-- <el-form-item> -->
							<!-- <el-button @click="showAddDialogHandler" icon="ele-Plus" type="primary"> 新增 </el-button> -->
						<!-- </el-form-item> -->
					<!-- </el-form>
				</el-card> -->
			</div>

			<div style="box-sizing: border-box" class="flex-1 pos-r">
				<div class="pos-a w-h-100" style="box-sizing: border-box">
					<el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px">
						<div style="" class="w-h-100 ver-flex">
							<div class="flex-1 pos-r">
								<div class="pos-a w-h-100">
									<el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
										<el-table-column type="index" :label="$t('wmd4Ixon01TmSHk82nKh')" width="55" align="center" :index="indexMethod" />
										<el-table-column :label="$t('ztu0TpvwBrwVxA1Hahd4A')" align="center">
											<el-table-column min-width="120" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_Name" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="scope">
													<!-- class="title-stl" @click="showDetailDialogHandler(scope.row)" -->
													<span> {{ scope.row.v_Name }} </span>
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column :label="$t('oOtI25EloVhXthyiHd2l')" align="center" min-width="120" :show-overflow-tooltip="true">
											<template #default="scope">
												<span class="title-stl" @click="showStreamDialogHandler(scope.row)" v-if="scope.row.n_Online && scope.row.v_RealMediaUrl"> {{ $t('b6TYx9jDZpHwIlu0CbhoE') }} </span>
												<span style="color: #777976" v-else> {{ $t('4QnNdHj_1Qof29Aw23t') }} </span>
											</template>
										</el-table-column>
										<!-- <el-table-column prop="v_ThirdDeviceId" label="设备编码"  align="center" /> -->
										<el-table-column :label="$t('anzVirgNbenjNuTUq8hSf')" align="center">
											<el-table-column min-width="120" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_BrandName" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="scope">
													<span> {{ scope.row.v_BrandName }} </span>
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column prop="v_Region" :label="$t('liRos24Dz6C9xVjHwNx')" align="center" min-width="120" :show-overflow-tooltip="true" />
										<el-table-column prop="v_OnlineName" :label="$t('mm5tuTPzHlRx26l0H2Rt')" align="center" min-width="120" :show-overflow-tooltip="true">
											<template #default="scope">
												<span style="color: #9c381a" v-if="scope.row.n_Online === 0"> {{ scope.row.v_OnlineName }} </span>
												<span style="color: #67c23a" v-else> {{ scope.row.v_OnlineName }} </span>
											</template>
										</el-table-column>
										<el-table-column :label="$t('1k0JpssoyUtl0rjWxQi5o')" align="center">
											<el-table-column min-width="120" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_StatusName" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="scope">
													<span style="color: #9c381a" v-if="scope.row.n_Status === 0"> {{ scope.row.v_StatusName }} </span>
													<span style="color: #67c23a" v-else> {{ scope.row.v_StatusName }} </span>
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column :label="$t('uDJY2uHey5cDkM2Yhp2w')" align="center">
											<template #default="scope">
												<span v-if="scope.row.v_Remark">{{ scope.row.v_Remark }}</span>
												<span v-else> - </span>
											</template>
										</el-table-column>

										<el-table-column :label="$t('rQ5NRdsIr9n8f_8WvQuu')" align="center" min-width="120" :show-overflow-tooltip="true">
											<el-table-column align="center" min-width="140" :show-overflow-tooltip="false">
												<template #header>
													<el-button text @click="searchClick" icon="ele-Search" type="primary"> 查询 </el-button>
													<el-button text @click="resetClick" icon="ele-Refresh"> 重置 </el-button>
												</template>
												<template #default="scope">
													<el-button v-if="$hasPer('cameraEquipmentManagement1:edit')" @click="showEditDialogHandler(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary"> {{ $t('df_3TpEeCdamca3TEpnH') }} </el-button>
													<template v-if="$hasPer('cameraEquipmentManagement2:qiyong')">
                                                        <el-button  @click="openOrCloseDevice(scope.row, 0, getData)" class="icon-e" icon="TurnOff" size="small" text type="danger" v-if="scope.row.n_Status === 1">
														{{ $t('gsmYKuHq26Ie21tHr2CnG') }}
													</el-button>
													<el-button @click="openOrCloseDevice(scope.row, 1, getData)" class="icon-e" icon="Open" size="small" text type="danger" v-if="scope.row.n_Status === 0">
														{{ $t('keRts1l8J9sodBcZkcpi0') }}
													</el-button>
                                                    </template>
													<el-button v-if="$hasPer('cameraEquipmentManagement3:delete')" @click="deleteHandle(scope.row.n_Id, getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger"> {{ $t('jqJiVuGIcEpOtQmTdxG9') }} </el-button>
													<!-- <el-button @click="showMediaDialogHandler(scope.row)" class="icon-e" icon="ele-View" size="small" type="primary" text > {{ $t('5wpg6JVb0UUtUnxfrJA') }} </el-button> -->
												</template>
											</el-table-column>
										</el-table-column>
									</el-table>
								</div>
							</div>
							<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
						</div>
					</el-card>
				</div>
			</div>
		</div>

		<add-camera-equipment v-if="isShowAddDialog" :isShowDialog="isShowAddDialog" @updateData="getData" @close="closeAddDialogHandler" />

		<edit-camera-equipment v-if="isShowEditDialog" :isShowDialog="isShowEditDialog" :item="currentItem" @updateData="getData" @close="closeEditDialogHandler" />

		<detail-camera-equipment v-if="isShowDetailDialog" :isShowDialog="isShowDetailDialog" :item="currentItem" @close="closeDetailDialogHandler" />

		<open-camera-stream v-if="isShowStreamDialog" :isShowDialog="isShowStreamDialog" :item="currentItem" :src="streamPath" @close="closeStreamDialogHandler" />
		<!-- <ViewMedia  :item="currentItemCamera" :showViewMedia="isShowCamera"  @close="closeMediaDialogHandler"/> -->
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive } from 'vue';
import getTableData from '/@/utils/getTableData';
import { CameraQueryPageList, CameraDelete, OpenOrCloseCamera } from '/@/api/its/camera';
import AddCameraEquipment from './component/add-camera-equipment.vue';
import EditCameraEquipment from './component/edit-camera-equipment.vue';
import DetailCameraEquipment from './component/detail-camera-equipment.vue';
import OpenCameraStream from './component/open-camera-stream.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import SearchModel from '/@/views/sms/component/search-model.vue';
// import ViewMedia from './ViewMedia.vue'
export default defineComponent({
	name: 'camera-equipment-management',
	components: { AddCameraEquipment, EditCameraEquipment, DetailCameraEquipment, OpenCameraStream, SearchModel },
	setup(props) {
		//当前操作数据行
		const currentItem: any = ref<any>({});

		const streamPath: any = ref('');

		//==================================================
		//控制添加对话框显示隐藏
		const isShowAddDialog = ref();
		//显示添加对话框
		const showAddDialogHandler = () => {
			isShowAddDialog.value = true;
		};
		//关闭添加对话框
		const closeAddDialogHandler = () => {
			isShowAddDialog.value = false;
		};
		//==================================================
		//控制修改对话框显示隐藏
		const isShowEditDialog = ref();
		//显示修改对话框
		const showEditDialogHandler = (row: any) => {
			currentItem.value.n_Id = row.n_Id;
			currentItem.value.v_Name = row.v_Name;
			isShowEditDialog.value = true;
		};
		//关闭修改对话框
		const closeEditDialogHandler = () => {
			isShowEditDialog.value = false;
			currentItem.value = {};
		};

		//==================================================
		//控制详情对话框显示隐藏
		const isShowDetailDialog = ref();
		//显示详情对话框
		const showDetailDialogHandler = (row: any) => {
			currentItem.value.n_Id = row.n_Id;
			currentItem.value.v_Name = row.v_Name;
			isShowDetailDialog.value = true;
		};
		//关闭详情对话框
		const closeDetailDialogHandler = () => {
			isShowDetailDialog.value = false;
			currentItem.value = {};
		};

		//==================================================
		//控制实时视频对话框显示隐藏
		const isShowStreamDialog = ref();
		//显示实时视频对话框
		const showStreamDialogHandler = (row: any) => {
			currentItem.value.n_Id = row.n_Id;
			currentItem.value.v_Name = row.v_Name;
			isShowStreamDialog.value = true;
			streamPath.value = row.v_RealMediaUrl;
		};
		//关闭实时视频对话框
		const closeStreamDialogHandler = () => {
			isShowStreamDialog.value = false;
			currentItem.value = {};
		};

		//==================================================
		//禁用或启用设备
		const openOrCloseDevice = async (row: any, n_status: Number, updateFun: Function) => {
			let tipMsg = window.$t('1jNF0wZtOmC1m191gmAr') + `${n_status == 0 ? window.$t('gsmYKuHq26Ie21tHr2CnG') : window.$t('keRts1l8J9sodBcZkcpi0')}` + window.$t('kjE3OffyW6VLkRoiRscex');
			ElMessageBox.confirm(tipMsg, window.$t('dnBj3ZylirLoG1EzFe'), {
				confirmButtonText: window.$t('ljWCcNnwiuLtut076mHBn'),
				cancelButtonText: window.$t('bg0dCh9NzdUyGoIvsnNRl'),
				type: 'warning',
			})
				.then(async () => {
					try {
						let res: any = await OpenOrCloseCamera({
							n_Id: row.n_Id,
							n_Status: n_status,
						});
						if (res.success) {
							updateFun();
						}
					} catch (err) {
						return;
					}
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: window.$t('vQ8dZlSpCyBiQYnRQJky'),
					});
				});
		};

		//==================================================
		//控制媒体文件对话框显示隐藏
		const isShowCamera = ref(false);
		const currentItemCamera = ref();
		//显示媒体文件对话框
		const showMediaDialogHandler = (row: any) => {
			currentItemCamera.value = row;
			isShowCamera.value = true;
		};
		//关闭媒体文件对话框
		const closeMediaDialogHandler = () => {
			currentItemCamera.value = {};
			isShowCamera.value = false;
		};

		const searchVal = ref('1');
		const searchObj: any = reactive({});

		let searchName = '1';
		const transferVal = ref();
		/*** 搜索类型选择事件 searchChange */
		const searchChange = (val: any) => {
			searchName = val;
			transferVal.value = '';
		};

		/*** searchClick 查询按钮 */
		const searchClick = () => {
			searchObj.date = new Date()
			let newObj = Object.keys(searInfo.value);
			if (newObj.length !== 0) {
				newObj.map((i: any) => {
					searchObj[i] = searInfo.value[i];
				});
			}
		};

		/*** resetFun */
		const resetFun = () => {
			let newObj = Object.keys(searchObj);
			if (newObj.length !== 0) {
				newObj.map((i: any) => {
					searchObj[i] = '';
				});
			}
		};

		/*** resetClick 重置按钮 */
		const resetClick = () => {
			searInfo.value = {};
			let newObj = Object.keys(searchObj);
			if (newObj.length !== 0) {
				newObj.map((i: any) => {
					searchObj[i] = '';
					// console.log(i);
				});
			}
			searchObj.date = new Date()
			initInfoFun();
		};

		/*** deleteHandle 删除数据事件 */
		const deleteHandle = async (val: String | Number, updateFun: Function) => {
			ElMessageBox.confirm(window.$t('kfX7FdblEz1xc7NaI8wl1'), window.$t('dnBj3ZylirLoG1EzFe'), {
				confirmButtonText: window.$t('ljWCcNnwiuLtut076mHBn'),
				cancelButtonText: window.$t('bg0dCh9NzdUyGoIvsnNRl'),
				type: 'warning',
			})
				.then(async () => {
					let param = { n_Id: val };
					try {
						let res: any = await CameraDelete(param);
						if (res.success) {
							updateFun();
						}
					} catch (err) {
						return;
					}
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: window.$t('vQ8dZlSpCyBiQYnRQJky'),
					});
				});
		};

      const  statusNam =  [
				{ label: window.$t('beIqjFuHmPkcdCCnekqC'), value: null },
				{ label: window.$t('gsmYKuHq26Ie21tHr2CnG'), value: 0 },
				{ label: window.$t('keRts1l8J9sodBcZkcpi0'), value: 1 },
			]

		/*** 初始化数据 */
		const basicsInfo: any = ref([]);
		const initInfoFun = () => {
			basicsInfo.value = [
				{
					typeId: 'v_Name', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
					typeNam: '', // 输入类型(number,text等) --- 选填
					searchVal: 'v_Name', // 查询字段 --- 必填
					defaultVal: '', // 字段默认值 --- 选填
					placeholder: '设备名称', // placeholder数据
					defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
					eventType: '', // 事件类型（如burl/change等） --- 选填
					defaultEvent: '', // 事件名称 --- 选填
				},
				{
					typeId: 'v_BrandName', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
					typeNam: '', // 输入类型(number,text等) --- 选填
					searchVal: 'v_BrandName', // 查询字段 --- 必填
					defaultVal: '', // 字段默认值 --- 选填
					placeholder: '品牌名称', // placeholder数据
					defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
					eventType: '', // 事件类型（如burl/change等） --- 选填
					defaultEvent: '', // 事件名称 --- 选填
				},
				{
					typeId: 'v_StatusName', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
					typeNam: '', // 输入类型(number,text等) --- 选填
					searchVal: 'n_Status', // 查询字段 --- 必填
					defaultVal: '', // 字段默认值 --- 选填
					placeholder: '设备状态', // placeholder数据
					defaultProp: statusNam, // 下拉框中使用，除下拉框外其它情况为空 --- 选填
					eventType: '', // 事件类型（如burl/change等） --- 选填
					defaultEvent: '', // 事件名称 --- 选填
				},
			];
		};

		const searInfo: any = ref();
		const searchHandel = (val: any) => {
			searInfo.value = val;
		};

		/*** onMounted 页面加载时显示 */
		onMounted(() => {
			initInfoFun();
		});

		return {
			...getTableData(CameraQueryPageList, {}, searchObj),
			deleteHandle,
			resetClick,
			searchClick,
			searchVal,
			searchChange,
			basicsInfo,
			searchHandel,
			currentItem,
			isShowAddDialog,
			showAddDialogHandler,
			closeAddDialogHandler,
			isShowEditDialog,
			showEditDialogHandler,
			closeEditDialogHandler,
			isShowDetailDialog,
			showDetailDialogHandler,
			closeDetailDialogHandler,
			isShowStreamDialog,
			showStreamDialogHandler,
			closeStreamDialogHandler,
			showMediaDialogHandler,
			closeMediaDialogHandler,
			openOrCloseDevice,
			isShowCamera,
			streamPath,
			currentItemCamera,
            statusNam,
			searchOptions: [
				{
					value: '1',
					label: window.$t('ztu0TpvwBrwVxA1Hahd4A'),
				},
				{
					value: '2',
					label: window.$t('anzVirgNbenjNuTUq8hSf'),
				},
				{
					value: '3',
					label: window.$t('uEOs8sH3iErqSx2Rx0h'),
				},
			], // 搜索方式
			transferVal,
			
		};
	},
});
</script>

<style lang="scss">
@import '../../style/public.scss';
</style>
<style scoped lang="scss">
#camera-equipment-management {
	.box-f {
		:deep(.el-form-item__label) {
			padding: 0;
		}
	}
	:deep(.el-card__body) {
		height: 100%;
	}
	:deep(.el-card) {
		border: none !important;
	}
	ul {
		list-style: none;

		li {
			cursor: pointer;

			&:hover {
				color: red;
			}
		}
	}
	.icon-e {
		:deep(.el-icon) {
			margin-right: 0px !important;
		}
	}
	.title-stl {
		color: #0052d9;
		text-decoration: underline;

		&:hover {
			text-decoration: none;
			cursor: pointer;
		}
	}
}
</style>
